import React from 'react';
import type { View } from '../types';
import { View as ViewEnum } from '../types';
import { DashboardIcon } from './icons/DashboardIcon';
import { EmployeeIcon } from './icons/EmployeeIcon';
import { AttendanceIcon } from './icons/AttendanceIcon';
import { PayrollIcon } from './icons/PayrollIcon';


interface SidebarProps {
  currentView: View;
  setCurrentView: (view: View) => void;
  onLogout: () => void;
}

const NavItem: React.FC<{
  icon: React.ReactNode;
  label: View;
  isActive: boolean;
  onClick: () => void;
}> = ({ icon, label, isActive, onClick }) => {
    const viewMapping = {
        [ViewEnum.Dashboard]: '仪表盘',
        [ViewEnum.Employees]: '员工管理',
        [ViewEnum.Attendance]: '考勤管理',
        [ViewEnum.Payroll]: '工资管理',
    }

  return (
    <button
      onClick={onClick}
      className={`flex items-center w-full px-4 py-3 text-sm font-medium rounded-lg transition-all duration-200 ease-in-out ${
        isActive
          ? 'bg-indigo-600 text-white shadow-lg'
          : 'text-slate-500 hover:bg-slate-200 hover:text-slate-800'
      }`}
    >
      {icon}
      <span className="ml-4">{viewMapping[label]}</span>
    </button>
  );
};

const Sidebar: React.FC<SidebarProps> = ({ currentView, setCurrentView, onLogout }) => {
  return (
    <aside className="w-64 bg-white p-6 flex flex-col shadow-lg">
      <div className="flex items-center mb-10">
        <div className="bg-indigo-600 p-2 rounded-lg">
          <svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M15 21v-1a6 6 0 00-5.176-5.97m5.176 5.97h3.333a2 2 0 002-2V7a2 2 0 00-2-2h-3.333M3 16.5v-1.5a2.5 2.5 0 015 0v1.5M3 16.5a2.5 2.5 0 005 0v-1.5" />
          </svg>
        </div>
        <h1 className="text-xl font-bold text-slate-800 ml-3">员工管理系统</h1>
      </div>
      <nav className="flex-1 space-y-2">
        <NavItem
          icon={<DashboardIcon />}
          label={ViewEnum.Dashboard}
          isActive={currentView === ViewEnum.Dashboard}
          onClick={() => setCurrentView(ViewEnum.Dashboard)}
        />
        <NavItem
          icon={<EmployeeIcon />}
          label={ViewEnum.Employees}
          isActive={currentView === ViewEnum.Employees}
          onClick={() => setCurrentView(ViewEnum.Employees)}
        />
        <NavItem
          icon={<AttendanceIcon />}
          label={ViewEnum.Attendance}
          isActive={currentView === ViewEnum.Attendance}
          onClick={() => setCurrentView(ViewEnum.Attendance)}
        />
        <NavItem
          icon={<PayrollIcon />}
          label={ViewEnum.Payroll}
          isActive={currentView === ViewEnum.Payroll}
          onClick={() => setCurrentView(ViewEnum.Payroll)}
        />
      </nav>
      <div className="mt-auto">
        <button onClick={onLogout} className="flex items-center w-full px-4 py-3 text-sm font-medium rounded-lg text-slate-500 hover:bg-red-100 hover:text-red-700 transition-colors">
            <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1" />
            </svg>
            <span className="ml-4">登出</span>
        </button>
      </div>
    </aside>
  );
};

export default Sidebar;